<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/register.css">
    <title>Register</title>
</head>
<body>
<h1>注册</h1>
<header class="header w">
    <div class="logo">
        <h1>
            <a href="index.html" title="移动营业厅">移动营业厅</a>
        </h1>
    </div>
</header>
<form id="registerForm">
    <input type="text" id="phoneNumber" name="phoneNumber" placeholder="手机号码" required>
    <br>
    <input type="password" id="password" name="password" placeholder="密码" required>
    <br>
    <input type="text" id="idCardNumber" name="idCardNumber" placeholder="身份证号" required>
    <br>
    <label for="gender">性别:</label>
    <select id="gender" name="gender" required>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <p>&nbsp;</p>
    <br>
    <button type="button" onclick="registerUser()">Register</button>
</form>
<p>Already have an account? <a href="login.html">Login here</a></p>

<script>
    function registerUser() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var password = document.getElementById("password").value;
        var idCardNumber = document.getElementById("idCardNumber").value;
        var gender = document.getElementById("gender").value;
        var user = {
            phoneNumber: phoneNumber,
            password: password,
            idCardNumber: idCardNumber,
            gender: gender,
            packageId: 0,
            balance: 0.0,
            dataBalance: 0.0,
            banStatus: false
        };
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/register", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                    window.location.href = "login.html";
                } else {
                    alert("Error: " + xhr.status);
                }
            }
        };
        xhr.send(JSON.stringify(user));
    }
</script>
</body>
</html>